<template>
  <ScreenLayoutWithMenu title="运营数据监控大屏">
    <div class="screen-grid grid-3x2">
      <ChartCard title="用户增长趋势" grid-area="a">
        <ECharts :option="userGrowthOption" />
      </ChartCard>
      <ChartCard title="活跃度分析" grid-area="b">
        <ECharts :option="activityOption" />
      </ChartCard>
      <ChartCard title="运营指标" grid-area="c">
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-value">12.5K</div>
            <div class="stat-label">日活跃用户</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">8.3K</div>
            <div class="stat-label">新增用户</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">68%</div>
            <div class="stat-label">留存率</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="渠道分析" grid-area="d">
        <ECharts :option="channelOption" />
      </ChartCard>
      <ChartCard title="功能使用排行" grid-area="e">
        <ECharts :option="featureOption" />
      </ChartCard>
      <ChartCard title="用户画像" grid-area="f">
        <ECharts :option="userProfileOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const userGrowthOption = ref({})
const activityOption = ref({})
const channelOption = ref({})
const featureOption = ref({})
const userProfileOption = ref({})

onMounted(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  
  userGrowthOption.value = getLineOption({
    categories: months,
    series: [{
      name: '用户数',
      data: generateRandomData(12).data
    }]
  })

  activityOption.value = getBarOption({
    categories: ['活跃', '一般', '不活跃'],
    series: [{
      name: '用户数',
      data: [8500, 3200, 800]
    }]
  })

  channelOption.value = getPieOption({
    name: '获客渠道',
    data: [
      { value: 335, name: '应用商店' },
      { value: 310, name: '社交媒体' },
      { value: 234, name: '搜索引擎' },
      { value: 135, name: '直接访问' },
      { value: 154, name: '其他' }
    ]
  })

  featureOption.value = getBarOption({
    categories: ['功能A', '功能B', '功能C', '功能D', '功能E'],
    series: [{
      name: '使用次数',
      data: generateRandomData(5).data.sort((a, b) => b - a)
    }]
  })

  userProfileOption.value = getPieOption({
    name: '用户类型',
    data: [
      { value: 4500, name: '新用户' },
      { value: 3800, name: '普通用户' },
      { value: 2200, name: 'VIP用户' },
      { value: 1500, name: '企业用户' }
    ]
  })
})
</script>
